<template>
  <div class="sec">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">SEC Filings</h1>
      </div>

      <div class="table releasesInterval">
        <div class="select">
          <el-select
            :popper-append-to-body="false"
            class="device-select"
            style="width: 300px; margin-right: 30px"
            v-model="tableValue"
            placeholder="请选择"
            @change="tableChange"
            clearable
          >
            <el-option
              v-for="item in tableOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-select
            :popper-append-to-body="false"
            class="device-select"
            style="width: 300px"
            v-model="filingValue"
            placeholder="请选择"
            @change="filingChange"
            clearable
          >
            <el-option
              v-for="item in filingOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </div>

        <div class="block" v-loading="loadingShow">
          <div class="list">
            <div class="list1">Filing Date</div>
            <div class="list2">Filing Type</div>
            <div class="list3">Description</div>
            <div class="list4">Document</div>
          </div>
          <div class="list" v-for="(item, index) in secList" :key="index">
            <div class="list1">{{ item.filingDate }}</div>
            <div class="list2">{{ item.filingType }}</div>
            <div class="list3">{{ item.description }}</div>
            <div class="list4">
              <div
                class="tanchu1"
                v-if="item.filingHtmlPath != null"
                @click="HtmlStop(item)"
              >
                <img src="../../assets/common/html-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingPdfPath != null"
                @click="PdfStop(item)"
              >
                <img src="../../assets/common/pdf-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingWordPath != null"
                @click="WordStop(item)"
              >
                <img src="../../assets/common/word-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingExcelPath != null"
                @click="ExcelStop(item)"
              >
                <img src="../../assets/common/xls-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingLocalPath != null"
                @click="LocalStop(item)"
              >
                <img src="../../assets/common/zip-file_2.svg" alt="" />
              </div>
            </div>
          </div>
        </div>

        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="limit"
            layout="prev, pager, next"
            :total="secTotalNum"
          >
          </el-pagination>

          <div class="quantity">
            <div
              class="num"
              v-for="(item, index) in 3"
              :key="index"
              @click="paginationMet(index)"
              :class="{ 'num-active': paginationActive == index }"
            >
              {{
                index == 0 ? "10" : index == 1 ? "25" : index == 2 ? "50" : ""
              }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">SEC Filings</h1>
      </div>

      <div class="table">
        <div class="select" @click="selectMet(0)" style="margin-bottom: 10px">
          <van-cell-group>
            <van-field
              v-model="tableStr"
              placeholder="请输入用户名"
              clearable
              readonly
            />
          </van-cell-group>
        </div>

        <div class="select" @click="selectMet(1)">
          <van-cell-group>
            <van-field
              v-model="filingValue"
              placeholder="请输入用户名"
              clearable
              readonly
            />
          </van-cell-group>
        </div>

        <div class="block" v-loading="loadingShow">
          <div class="list">
            <div class="list1">Filing Date</div>
            <div class="list2">Filing Type</div>
            <div class="list3">Description</div>
            <div class="list4">Document</div>
          </div>
          <div class="list" v-for="(item, index) in secList" :key="index">
            <div class="list1">{{ item.filingDate }}</div>
            <div class="list2">{{ item.filingType }}</div>
            <div class="list3">{{ item.description }}</div>
            <div class="list4">
              <div
                class="tanchu1"
                v-if="item.filingHtmlPath != null"
                @click="HtmlStop(item)"
              >
                <img src="../../assets/common/html-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingPdfPath != null"
                @click="PdfStop(item)"
              >
                <img src="../../assets/common/pdf-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingWordPath != null"
                @click="WordStop(item)"
              >
                <img src="../../assets/common/word-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingExcelPath != null"
                @click="ExcelStop(item)"
              >
                <img src="../../assets/common/xls-file_2.svg" alt="" />
              </div>
              <div
                class="tanchu1"
                v-if="item.filingLocalPath != null"
                @click="LocalStop(item)"
              >
                <img src="../../assets/common/zip-file_2.svg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <van-popup
        v-model="pickerShow"
        position="bottom"
        style="min-height: 100px"
      >
        <van-picker
          show-toolbar
          :columns="tableOptions"
          value-key="label"
          @cancel="pickerCancel"
          @confirm="pickerConfirm"
        />
      </van-popup>

      <van-popup
        v-model="pickerShow1"
        position="bottom"
        style="min-height: 100px"
      >
        <van-picker
          show-toolbar
          :columns="filingOptions"
          value-key="label"
          @cancel="picker1Cancel"
          @confirm="picker1Confirm"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { secListGet } from "../../api/index";

export default {
  data() {
    return {
      tableOptions: [
        {
          value: "0",
          label: "All Filing Type",
        },
        {
          value: ["10-K,10-K/A,20-F,20-F/A,NT 10-K,NT 20-F"],
          label: "Annual Reports",
        },
        {
          value: ["10-Q, 10-Q/A, NT 10-Q"],
          label: "Quarterly Reports",
        },
        {
          value: ["8-K, 8-K/A, 6-K, 6-K/A"],
          label: "Current Reports",
        },
        {
          value: ["PRE 14A, DEF 14A, PRE 14C, DEF 14C"],
          label: "Proxy Statements",
        },
        {
          value: ["Other"],
          label: "Other",
        },
      ],
      tableValue: "",
      tableStr: "",
      //-------------------
      filingOptions: [
        {
          value: "0",
          label: "All Years",
        },
        {
          value: "1",
          label: "2025",
        },
        {
          value: "2",
          label: "2024",
        },
        {
          value: "3",
          label: "2023",
        },
        {
          value: "24",
          label: "2022",
        },
      ],
      filingValue: "",
      //---------
      pageNo: 1,
      limit: 10,
      secTotalNum: 0,
      paginationActive: 0,
      //--------------------
      pickerShow: false,
      pickerShow1: false,
      //-----------------------------
      secList: [],
      loadingShow: true,
    };
  },
  created() {
    this.secCreated();
    this.scrollTotap();
  },
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    secCreated() {
      let params = {
        pageSize: 1,
        fillingTypes: this.tableValue,
        year: this.filingValue,
        pageSize: this.limit,
        pageNo: this.pageNo,
      };

      console.log("qqq", params);

      secListGet(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.secList.forEach((item, index) => {
            item.filingDate = item.filingDate.slice(0, 10);
          });

          this.secList = res.resultData.secList;
          this.secTotalNum = res.resultData.totalNum;

          this.loadingShow = false;
        }
      });
    },
    tableChange(e) {
      console.log("222", e);
      if (e == 0) {
        this.tableValue = "";
      } else {
        this.tableValue = e;
      }
      this.loadingShow = true;
      this.secCreated();
    },
    filingChange(e) {
      if (e == "All Years") {
        this.filingValue = "";
      } else {
        this.filingValue = e;
      }
      this.loadingShow = true;
      this.secCreated();
    },
    //-----------------------------
    handleCurrentChange(val) {
      this.pageNo = val;
      this.loadingShow = true;
      this.secCreated();
    },
    paginationMet(index) {
      this.paginationActive = index;
      this.limit = index == 0 ? 10 : index == 1 ? 25 : index == 2 ? 50 : "";
      this.loadingShow = true;
      this.secCreated();
    },

    //--------
    selectMet(index) {
      if (index == 0) {
        this.pickerShow = !this.pickerShow;
      } else {
        this.pickerShow1 = !this.pickerShow1;
      }
    },
    pickerConfirm(item, index) {
      this.tableValue = item.value;
      this.tableStr = item.label;
      this.loadingShow = true;
      this.pickerShow = false;
      this.secCreated();
    },
    pickerCancel() {
      this.tableValue = "";
      this.tableStr = "";
      this.pickerShow = false;
      this.loadingShow = true;
      this.secCreated();
    },

    picker1Confirm(item, index) {
      this.filingValue = item.label;
      this.loadingShow = true;
      this.pickerShow1 = false;
      this.secCreated();
    },
    picker1Cancel() {
      this.filingValue = "";
      this.pickerShow1 = false;
      this.loadingShow = true;
      this.secCreated();
    },
    //----------------
    HtmlStop(item) {
      window.open(item.filingHtmlPath, "_black");
    },
    PdfStop(item) {
      window.open(item.filingPdfPath, "_black");
    },
    WordStop(item) {
      window.open(item.filingWordPath, "_black");
    },
    ExcelStop(item) {
      window.open(item.filingExcelPath, "_black");
    },
    LocalStop(item) {
      window.open(item.filingLocalPath, "_black");
    },
  },
};
</script>

<style lang="less" scoped>
.sec {
  .appPc {
    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .table {
      padding-top: 50px;
      padding-bottom: 50px;
      box-sizing: border-box;

      .select {
        width: 100%;
        margin-bottom: 100px;

        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          color: #fff;
          background: #5897fb;
        }
      }

      .block {
        .list {
          min-height: 50px;
          width: 100%;
          display: flex;
          align-items: center;
          padding: 10px;
          box-sizing: border-box;
          //--------
          border-bottom: 1px solid #ccc;
          font-size: 18px;
          font-weight: 500;
          cursor: pointer;

          .list1 {
            width: 15%;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
          }
          .list2 {
            width: 15%;
            text-align: left;
          }
          .list3 {
            width: 50%;
            text-align: left;
            padding-right: 30px;
          }
          .list4 {
            width: 20%;
            text-align: center;
            display: flex;
            align-items: center;

            .tanchu1 {
              width: 30px;
              height: 30px;
              margin-right: 20px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .tanchu1:last-child {
              margin-right: 0;
            }
          }
        }

        .list:first-child {
          background: #e5f0ff;
          font-weight: bold;
          color: #000;
          border-bottom: 0;
          border-radius: 10px;
        }

        .list:hover {
          background: #ececec;
        }
      }

      .pagination {
        height: 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
        position: relative;

        .quantity {
          height: 40px;
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;

          .num {
            margin-right: 20px;
            font-weight: bold;
            cursor: pointer;
          }

          .num-active {
            color: #5897fb;
          }
        }
      }
    }
  }

  .appH5 {
    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .table {
      padding: 30px 10px;
      box-sizing: border-box;

      .select {
        width: 100%;
        margin-bottom: 60px;

        /deep/ .van-cell {
          border: 1px solid #ccc;
          border-radius: 5px;
          height: 40px;
          line-height: 40px;
          padding: 0;
          padding-left: 10px;
          box-sizing: border-box;
        }
      }

      .block {
        .list {
          padding: 10px 0;
          box-sizing: border-box;
          min-height: 40px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ccc;
          cursor: pointer;
          font-size: 14px;

          .list1 {
            width: 23%;
            text-align: left;
            padding-left: 5px;
            box-sizing: border-box;
          }
          .list2 {
            width: 23%;
            text-align: center;
          }
          .list3 {
            width: 30%;
            text-align: left;
            padding: 0 5px;
            box-sizing: border-box;
            word-break: break-word;
          }
          .list4 {
            width: 24%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;

            .tanchu1 {
              width: 30px;
              height: 30px;
              margin-right: 10px;
              margin-bottom: 10px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .tanchu1:nth-child(2n + 2) {
              margin-right: 0;
            }
          }
        }
        .list:first-child {
          background: #e5f0ff;
          font-weight: bold;
          color: #000;
          border-bottom: 0;
          border-radius: 10px;
        }
      }

      .pagination {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 50px;
        position: relative;

        .left {
          width: 60%;
        }

        .right {
          width: 40%;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-left: 20px;

          .num {
            margin-right: 20px;
            font-weight: bold;
            cursor: pointer;
            font-size: 16px;
          }

          .num-active {
            color: #5897fb;
          }
        }
      }
    }
  }
}
</style>